<template>
    <div class="visitor">
        <div class="in_love">
            <div class="love" v-if="loveTime && loveTime.length>0">
                <image class="title" src="../../static/images/love.png"/>
                <p class="time">
                    <span>{{loveTime[0]}} 天 </span>
                    <span>{{loveTime[1]}} 时 </span>
                    <span>{{loveTime[2]}} 分 </span>
                    <span>{{loveTime[3]}} 秒 </span>
                </p>
            </div>
            <div class="marry" v-if="marryTime && marryTime.length>0">
                <p class="time">
                    <span>{{marryTime[0]}} 天 </span>
                    <span>{{marryTime[1]}} 时 </span>
                    <span>{{marryTime[2]}} 分 </span>
                    <span>{{marryTime[3]}} 秒 </span>
                </p>
                <image class="title" src="../../static/images/marry.png"/>
            </div>
        </div>
        <scroll-view
            scroll-y
            class="box"
            v-if="isLogin===1"
        >
            <div class="item" v-for="(item, index) in userList" :key="index" @tap="lookFullName(item.user.nickName)">
                <image v-if="item.user.avatarUrl" :src="item.user.avatarUrl"/>
                <image v-else src="../../static/images/he.png"/>
                <p>{{item.user.nickName}}</p>
            </div>
            <div class="loading-container" v-if="!getSrcFlag">
                <loading></loading>
            </div>
        </scroll-view>
        <button v-if="isLogin===2" class="login" lang="zh_CN" open-type="getUserInfo" @getuserinfo="login">授权可查看全部访客</button>
        <div class="next" v-if="isLogin===1 && getSrcFlag" @tap="toNextMini">进入邀请函小程序</div>
    </div>
</template>

<script>
import Loading from 'components/loading'
import tools from 'common/js/tools'
export default {
  name: 'Visitor',
  data () {
    return {
      marryTime: [],
      loveTime: [],
      timer: null,
      openId: '',
      getSrcFlag: false,
      userList: [],
      isLogin: 3
    }
  },
  components: {
    Loading
  },
  onShow () {
    const that = this
    that.timer = setInterval(() => {
      that.marryTime = tools.getTimer('02/02/2019')
      that.loveTime = tools.getTimer('01/07/2012')
    }, 1000)
    wx.getSetting({
      success (res) {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
          that.isLogin = 1
          that.getUserList()
        } else {
          that.isLogin = 2
        }
      }
    })
  },
  onPullDownRefresh () {
    const that = this
    that.getSrcFlag = false
    wx.getSetting({
      success (res) {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
          that.isLogin = 1
          that.getUserList()
        } else {
          that.isLogin = 2
        }
      }
    })
  },
  methods: {
    login (e) {
      const that = this
      if (e.target.errMsg === 'getUserInfo:ok') {
        that.isLogin = 1
        wx.getUserInfo({
          success: function (res) {
            that.userInfo = res.userInfo
            that.getOpenId()
          }
        })
      } else {
        that.isLogin = 2
      }
    },

    getOpenId () {
      const that = this
      wx.cloud.callFunction({
        name: 'user',
        data: {}
      }).then(res => {
        that.openId = res.result.openid
        that.getIsExist()
      })
    },

    getIsExist () {
      const that = this
      const db = wx.cloud.database()
      const user = db.collection('user')
      user.where({
        _openid: that.openId
      }).get().then(res => {
        if (res.data.length === 0) {
          that.getSrcFlag = false
          that.addUser()
        } else {
          that.getUserList()
        }
      })
    },

    addUser () {
      const that = this
      that.sendFlag = false
      const db = wx.cloud.database()
      const user = db.collection('user')
      user.add({
        data: {
          user: that.userInfo
        }
      }).then(res => {
        that.getUserList()
      })
    },

    getUserList () {
      const that = this
      wx.cloud.callFunction({
        name: 'userList',
        data: {}
      }).then(res => {
        that.getSrcFlag = true
        that.userList = res.result.data.reverse()
        wx.stopPullDownRefresh()
      })
    },

    lookFullName (name) {
      wx.showToast({
        title: name,
        icon: 'none',
        duration: 1000
      })
    },

    toNextMini () {
      wx.navigateToMiniProgram({
        appId: 'wx45677c8b96aad124',
        path: '/pages/index/main',
        success (res) {
          // 打开成功
          console.log(res)
        },
        fail: function (err) {
          console.log(err)
          // 接口调用失败的回调函数，wx.navigateBack
        }
      })
    }
  }
}
</script>

<style scoped lang="stylus">
@import '../../common/css/font.css'
@-webkit-keyframes rightToLeft
  from
    -webkit-transform translateX(750rpx)
  to
    -webkit-transform translateX(0)
@-webkit-keyframes leftToRight
  from
    -webkit-transform translateX(-750rpx)
  to
    -webkit-transform translateX(0)
.visitor
  height 100%
  .in_love
    width 690rpx
    padding 30rpx
    height 160rpx
    background -webkit-linear-gradient(#66cdcc 0%, #ffffff 100%)
    .love
      display flex
      justify-content flex-start
      align-items center
      height 80rpx
      animation rightToLeft 0.3s linear forwards
      .time
        font-family "Pacifico"
      .title
        width 70rpx
        height 60rpx
        margin-right 30rpx
    .marry
      display flex
      justify-content flex-end
      align-items center
      height 80rpx
      animation leftToRight 0.3s linear forwards
      .time
        font-family "Pacifico"
        margin-right 30rpx
      .title
        width 60rpx
        height 60rpx
  .box
    height 600rpx
    width 690rpx
    margin-left 30rpx
    border-radius 16rpx
    box-shadow 0 0 20rpx rgba(0, 0, 0, 0.1)
    display flex
    justify-content flex-start
    align-items flex-start
    flex-wrap wrap
    .item
      width 120rpx
      display flex
      flex-direction column
      justify-content flex-start
      align-items center
      padding 25rpx
      float left
      image
        width 100rpx
        height 100rpx
        border-radius 50rpx
      p
        height 50rpx
        line-height 50rpx
        font-size 24rpx
        color #444
        width 100rpx
        overflow hidden
        text-overflow ellipsis
        white-space nowrap
        text-align center
    .loading-container
      position fixed
      width 100%
      height 100%
      top 0
      bottom 0
      left 0
      right 0
      margin auto
      background #fff
      display flex
      justify-content center
      align-items center
  .login, .next
    margin 300rpx auto 0
    border-radius 16rpx
    background #D7FDFE
    width 500rpx
    font-size 30rpx
    height 80rpx
    line-height 80rpx
    font-weight 600
    box-shadow 0 0 20px #CCC
    &::after
      border none
  .login
    color #333
  .next
    background #FFB9C4
    text-align center
    position fixed
    bottom 30rpx
    left 50%
    margin-left -250rpx
    color #fff
</style>
